<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
	<head>
		<title>代理佣金</title>
		 <%@include file="/WEB-INF/base.jspf"%> 
		<!-- <script src="/cp2/js/iscroll.js" type="text/javascript" charset="utf-8"></script> -->
		<!-- <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui"> -->
		<!-- <meta content="yes" name="apple-mobile-web-app-capable">
		<meta content="black" name="apple-mobile-web-app-status-bar-style">
		<meta content="telephone=no" name="format-detection">
		<meta content="email=no" name="format-detection">
		<meta http-equiv="refresh" content="100"> -->
		<!-- <script src="/js/clipboard.min.js"></script> -->
		<!-- <script src="/js/lCalendar.js"></script>
		<link rel="stylesheet" href="/css/lCalendar.css"> -->
		<script src="/js/datePicker.js"></script>
		<style type="text/css">
		
		* {
				margin: 0;
				padding: 0;
				font-size: inherit;
				 -webkit-appearance: none;
				-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
				-webkit-touch-callout: none;
				box-sizing: border-box; 
			}
			
			 html,
			body {
				font-size: 62.5%!important;
				color: #333;
				background-color: #f5f5f5 !important; 
				margin: 0 auto;
				width: 100%;
				min-height: 100%;
				overflow-x: hidden;
				-webkit-user-select: none;
			} 
			
			body {
				font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
				-webkit-text-size-adjust: 100%;
				-webkit-overflow-scrolling: touch;
				overflow-scrolling: touch;
			}  body{
				position: relative;
				background-color: #e2e2e28a;
				}  
			 #wrapper{
				 left:0;
				 top:0;
				 position: absolute; 
				 width: 100%;
				 padding: 0rem 0.4rem ;
			 }
			#scroller{
				margin-top: 50px;
				display: flex;
				flex-direction: column;
				}
			.div-dl-date{
				float: right;
				padding-right:30px;
				cursor: pointer;
			    color: #fff;	
			    position: absolute;
			    top: 50%;
			    transform: translateY(-50%);
			    font-size: 16px;
			    right: 10px;
			}
			.div-dl-date span{
				 display: flex;
			    -ms-flex-align: center;
			    align-items: center;
			    -ms-flex-pack: end;
			    justify-content: flex-end;
			    font-size: 1.6rem;
			    width: 8rem;
			}
			
			.div-dl-triangle{
				position:absolute;
				right:15px;
				top:50%;
			    width: 0;
			    height: 0;
			    color:#999;
			    border-top: 5px solid;
			    border-right: 5px solid transparent;
			    border-left: 5px solid transparent;
			    pointer-events: none;
			    -webkit-tap-highlight-color: transparent;
			}
			
			.div-dl-dateXq{
				display: none;
				position: absolute;
				z-index:1999;
				right:10px;
				top:40px;
				
			}
			.div-dl-dateXq.active{
				display: block;
				position: absolute;
				z-index:1999;
				right:10px;
				top:40px;
			}
			.div-dl-dateXq:after{
				content:"" ;
				position:absolute;
				top:-5px;
				right:5px;
				z-index:10;
				border-bottom: 5px solid;
			    border-right: 5px solid transparent;
			    border-left: 5px solid transparent;
			}
			.div-date-content{
				position:relative;
				box-sizing: border-box;
   				-webkit-tap-highlight-color: transparent;
   				font-size: 15px;
			    color: #000;
			    background-color: #fff;
			    border-radius: 3px;
			    -webkit-box-shadow: 0 0 2px rgba(0,0,0,.21);
			    box-shadow: 0 0 2px rgba(0,0,0,.21);
			    background: #fff;
			    width: 12rem;
			    padding:0 1rem;
			    overflow: hidden;
			    
			}	
			
			.div-date-select:first-child {
			    border-top: 0;
			    padding-top: 0;
			}
			
			.div-date-select {
    			font-size: 1.6rem;
			    border-top: 1px solid #ddd;
			    height:40px;
			    line-height:40px;
			    text-align: left;	
			}
			
			 .ridio-date-right{
			 	display:none;
			    margin-right: 0.1rem;
			    width: 15px;
			    height: 15px;
			    float: right;
			    margin-top:12px;
			    -webkit-transform: rotate(0deg);
			    -ms-transform: rotate(0deg);
			    transform: rotate(0deg); 
			}
			.ridio-date-right.active{
				display:block;
			}
			.ridio-date-right.active:after{
				content:'';
				top: -2.5px;
			    right: 5px;
			    z-index: 999;
			    width: 7px;
			    height: 14px;
			    border-style: solid;
			    border-width: 0 1.5px 1.5px 0;
			    display: block;
			    border-color: #108ee9;
			    content: " ";
			    -webkit-transform: rotate(45deg);
			    -ms-transform: rotate(45deg);
			    transform: rotate(45deg);
			} 
			.layui-inline{
				background-color: #fff;
				padding:5px 20px;
			}
			.layui-inline input{
				border: none;
				outline: none;
				
			}
			.layui-inline input:first-child{
				width:50%;
				text-align: left;
			}
			.layui-inline input:last-child{
				width:40%;
				text-align: right;
			}
			.layui-inline{
				width:100%;
			}
			.total-container{
				display: flex;
				flex-flow: wrap;
			    justify-content: space-between;
			    margin: 0 1.5rem;
			}
			
			.total-item{
				display:flex;
				font-size: 1.4rem;
			    margin-bottom: 1.2rem;
			    padding: .5rem;
			    background: #fff;
			    color: #999;
			    border-radius: 5px;
			    -ms-flex-align: center;
			    align-items: center;
			    width: 30%;
			}
			.total-number {
			    font-size: 0.2rem !important;
			}
			
			.total-icon{
			    width: 2.5rem;
			    height: 2.5rem;
			    margin-right: 0.3rem;
			}
			.total-icon.commission{
				background: url(/img/commission.png)50% no-repeat;
				background-size: contain;
			}
			
			.total-icon.betmoney{
				background: url(/img/bettingmoney.png) 50% no-repeat;
				background-size: contain;
			}
			.total-number{
				font-size: 0.3rem;
				text-align: center;
			}
			.total-number p{
				font-size: 1.4rem;
   				 color: #999;
   				 margin: 0;
			}
			
			.total-number span{
			    color: #333;
			    font-size: 1.6rem;
			    font-weight: 700;
			    word-wrap: break-word;
			    word-break: break-all;
			    white-space: normal;
			}
			#demo1{
				width: 30%;
				height: 40px;
				display:inline-block;
				font-size: 16px;
				border:none;
				outline:none;
				border-radius: 5px;
				 margin:  0 3%; 
				padding: 5px;
				text-align: center;
				color: #888;
			}
			#demo2{
				width: 30%;
				height: 40px;
				display:inline-block;
				font-size:16px;
				border:none;
				outline:none;
				text-align: center;
				border-radius: 5px;
				 margin: 0 3%; 
				padding: 5px;
				color: #888;
			}
			
			.btn_search{
				display:inline;
    			color: #fff;
			    background-color: #3180eb;
			    font-size: 1.6rem;
			    padding: 0 .8rem;
			    border-radius: 5px;
			    height:2.6rem;
			    line-height:2.6rem;
			    padding-top:1px;
				border: none;
				outline: none; 
			}
			table.dataTable thead th, table.dataTable thead td{
				/* padding:0;  */
				text-align: center;
				border:none;
				outline: none;
				font-size: 1.4rem;
				 padding:10px 5px; 
			 
			}
			table.dataTable tbody th, table.dataTable tbody td {
				 padding:10px 10px; 
				text-align: center;
				padding:10px 0;
				font-size: 1.4rem;
				border:none;
				outline: none;
			}
			
			table.dataTable.no-footer {
			     border-bottom: none;
			     background: #fff;
			}
			.dataTables_paginate span {
				display: none!important;
			}
			
			.dataTables_wrapper {
				margin-top: 0.5rem;
			}
			.table-bordered{
				border:none;
			}
			.dataTables_wrapper.no-footer .dataTables_scrollBody {
			    border:none;
			}
			
			.content_error{
				display:none;
			    -ms-flex-direction: column;
			    flex-direction: column;
			    -ms-flex-align: center;
			    align-items: center;
			    -ms-flex-pack: center;
			    justify-content: center;
			    height: 500px;
			}
			.icon_error{
				width: 18rem;
			    height: 16rem;
			    background: url(/img/no_data.png) 50% no-repeat;
			    background-size: contain;
			}
			.text_error{
				margin: 6px 0 15px;
			    font-size: 1.5rem;
			    color: #999;
			}
			
			#tips{
				padding:5px 12px;
				color: red;
				display: none;
			}
			.date-content-header{
				font-size: 1.4rem;
			    -ms-flex: 1 1;
			    flex: 1 1;
			    -ms-flex-align: center;
			    align-items: center;
			    background: #fff;
			}
			.div-fandian{
				display: flex;
				justify-content: flex-start;
				align-items: center;
				    margin: 0 1.5rem;	
			}
			 
			
		</style>
	</head>

	<body>
		<div class="col-xs-12 col-sm-4 col-sm-offset-4 text-center" style="color:white;background: #059BF3;height: 50px;line-height:50px;position: fixed;margin-top: 0px;left: 0px;z-index: 100;padding-left:0;padding-right:0;">
			<a onclick="back()" class="glyphicon glyphicon-chevron-left fl" style="cursor:pointer; color: white;position:absolute;top:50%;transform:translateY(-50%);font-size: 20px;left:10px;"></a>
			<strong style="font-size: 20px;">代理佣金</strong>
			 <div class="div-dl-date">
				<span>今天</span>
				<div class="div-dl-triangle"></div>
			</div>
			 <div class="div-dl-dateXq" id="dateXq">
				<div class="div-date-content">
			 		<div class="div-date-inner">
			 			<div class="div-date-select">
			 				<span>今天</span>
			 				 <div class="ridio-date-right active"></div> 
			 			</div>
			 			<div class="div-date-select">
			 				<span>昨天</span>
			 				 <div class="ridio-date-right"></div>
			 			</div>
			 			<div class="div-date-select">
			 				<span>一周</span>
			 				 <div class="ridio-date-right"></div>
			 			</div>
			 			<div class="div-date-select">
			 				<span>半个月</span>
			 			 	<div class="ridio-date-right"></div>
			 			</div>
			 		</div>
			 	</div>
			</div> 
		</div>
		 <div id="scroller"  class="col-xs-12 col-sm-4 col-sm-offset-4" style="padding:0;">
			<!--  <input id="demo1"> -->
		 	 <div id="tips"></div>
		 	<div class="date-content-header" >
			 	<input id="demo1" type="text" readonly="" name="input_date" placeholder="开始时间" data-lcalendar="2011-01-1,2019-12-31" />
			 	<span style="font-size: 16px;">至</span>
			 	<input id="demo2" type="text" readonly="" name="input_date" placeholder="结束时间" data-lcalendar="2011-01-1,2019-12-31" />
			 	<button class="btn_search">搜索</button>
			</div> 
		 	<!-- <div class="layui-inline" >
				<div class="layui-inline">
					
					<input type="text" id="date1" placeholder="开始时间" value="" class="fl">
					<span>至</span>
					<input type="text" id="date2" placeholder="结束时间" value="" class="fr">
				</div>
			</div> -->
			
			<div style="margin: 1rem;font-size: 1.6rem;">当前统计：</div>
			<div class="total-container">
				<div class="total-item">
					<div class="total-icon commission"></div>
					<div class="total-number">
						<p>返点金额</p>
						<span id="Fdmoney"></span>
					</div>
				</div>
				
				<div class="total-item">
					<div class="total-icon betmoney"></div>
					<div class="total-number">
						<p>充值金额</p>
						<span id="Czmoney"></span>
					</div>
				</div>
				
				<div class="total-item">
					<div class="total-icon betmoney"></div>
					<div class="total-number">
						<p>打码金额</p>
						<span id="Dmmoney"></span>
					</div>
				</div>
			</div>
			<div class="div-fandian">
				<div class="total-item" style="width:35%;">
					<div class="total-icon commission"></div>
					<div class="total-number">
						<p>可领取返点</p>
						<span id="lead_money"></span>
					</div>
				</div>
				<button class="btn_search" id="btn_money" style="width:30%;margin-left: 10px;margin-bottom: 1.2rem;height: 4rem;line-height: 4rem;">点击领取</button>
			</div>
			<div>
				<table id="table-i-dailiList"  class=" table-striped table-bordered table-hover">
					<thead>
						<tr>
							<td>下级账号</td>
							<td>下级等级</td>
							<td>下级余额</td>
							<td>充值金额</td>
							<td>打码金额</td>
							<td>返点金额</td>
						</tr>
					</thead>
					<tbody id="div-user-message">
	 					
					</tbody>
				</table>
				
				<div class="content_error">
					<div class="icon_error"></div>
					<div class="text_error"></div>
				</div>
			</div>
		</div>
		
			
		
		
		
<div class="modal-div-fakeModal" id="div-i-noticeGenDan">
	<div class="div-c-modalContent">
		<h3 class="fakemodal-title"></h3>
		<div class="fakemodal-content"></div>
		<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
	</div>
</div>		

	<div class="modal-div-fakeModal" id="div-i-notice">
		<div class="div-c-modalContent">
			<h3 class="fakemodal-title"></h3>
			<div class="fakemodal-content"></div>
			<div class="fakemodal-btnsGroup"><button class="btn btn-default btn-class-closeFakeModal">关闭</button></div>
		</div>
		</div>	
	<script type="text/javascript">
	$(function(){
		$("#demo1").on('click',function(event){
			$('.gearDate').addClass("col-xs-12 col-sm-4 col-sm-offset-4");
		})
		
		$("#demo2").on('click',function(event){
			$('.gearDate').addClass("col-xs-12 col-sm-4 col-sm-offset-4");
		})
	})
	var calendarstart = new datePicker();
	calendarstart.init({
		'trigger': '#demo1', /*按钮选择器，用于触发弹出插件*/
		'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
		'minDate':'1900-1-1',/*最小日期*/
		'maxDate':'2100-12-31',/*最大日期*/
		'onSubmit':function(){/*确认时触发事件*/
			var theSelectData=calendarstart.value;
		},
		'onClose':function(){/*取消时触发事件*/
		}
	});
	
	var calendarend = new datePicker();
	calendarend.init({
		'trigger': '#demo2', /*按钮选择器，用于触发弹出插件*/
		'type': 'date',/*模式：date日期；datetime日期时间；time时间；ym年月；*/
		'minDate':'1900-1-1',/*最小日期*/
		'maxDate':'2100-12-31',/*最大日期*/
		'onSubmit':function(){/*确认时触发事件*/
			var theSelectData=calendarend.value;
		},
		'onClose':function(){/*取消时触发事件*/
		}
	});
	
			/* var calendarStart = new lCalendar();
			calendarStart.init({
				'trigger': '#demo1',
				'type': 'date'
			});
			var calendarEnd = new lCalendar();
			calendarEnd.init({
				'trigger': '#demo2',
				'type': 'date',
			}); */
			
			function jianrong() {
				/* 动态设置 html font-size, 使用 rem 适配 */
				var htmlSelector = document.documentElement
				var width = htmlSelector.clientWidth
				if (width > 600) {
					width = 600
				}
				var fSize = width / 7.5
				htmlSelector.style.fontSize = String(fSize) + "px"
				htmlSelector.dataset.fontrem = fSize.toFixed(2)
			}
			jianrong();
			//点击选择日期类型查询
			  $(".div-dl-date").on("click",function(){
				 if($(this).next().hasClass("active")){
					 $(this).next().removeClass("active")
				 }else{
					 $(this).next().addClass("active") 
				 }
			 })
			 
			 
			 
			 $.ajax({
				type:'post',
				url:"/agent/findAgentRebateSum.do",
				data:{
					 "startDate":null,
					"endDate":null 
				},
				success:function(data){
					newData=data.data;
				 	$("#Fdmoney").text(newData.rebate_money);
				 	$("#Czmoney").text(newData.recharge_money);
				 	$("#Dmmoney").text(newData.code_money)
				 	$("#lead_money").text(newData.one_money);
				}
			});
			
			  function GetDateStr(AddDayCount) { 
				    var dd = new Date(); 
				        dd.setDate(dd.getDate()-AddDayCount);//获取AddDayCount天前的日期 
				        var y = dd.getFullYear(); 
				        var m = dd.getMonth()+1;//获取当前月份的日期 
				        if(m<10){
				        	m="0"+m
				        }
				        var d = dd.getDate();
				        if(d<10){
				        	d="0"+d
				        }
				        return y+"-"+m+"-"+d; 
				} 
			
			 var s1 = GetDateStr(0);
			 $("#demo1").val(s1);
			 $("#demo2").val(s1);
			 var StartDate= $("#demo1").val();
			 var EndDate=$("#demo2").val();
			 
			 $("#btn_money").on("click",function(){
				 $.ajax({
						type:'post',
						url:"/agent/receiveRebateMoney.do",
						data:{
						},
						success:function(data){
							if(data.data == 2){
								showNormalNoticeModal("#div-i-notice", " ", "领取金额必须大于"+data.message)
							}
							if(data.data == 0){
								$("#lead_money").text(data.data);
							}
						}
					});
			 })
			 
			
			 function dataTable01(){
					var oTable=	$("#table-i-dailiList").DataTable({
							 "bProcessing" : false, // 是否显示取数据时的那个等待提示
							"bServerSide" : true,//这个用来指明是通过服务端来取数据
							 "bPaginate" : true, //是否显示分页 
							"sAjaxSource" : "/agent/findAgentRebateInfo.do",//这个是请求的地址
							"fnServerData" : retrieveData, // 获取数据的处理函数
							"destroy":true,
						      // "bPaginate": true,
						       "bLengthChange": true,      
						      "bSort": false,
						      "dom": 't<"toolbar" pi>',
						       "bInfo": true, 
						      "bAutoWidth": false, 
//						         "bServerSide":true,
						      'aLengthMenu':[5,10, 20], 
						       "searching": false,  
						      
						       "pagingType": "simple_numbers",
			    	            "autoWidth":false,
			    	            "language": {//语言设置  
							    	   "zeroRecords": "没有消息",     
							            "sInfo": "第 _PAGE_ / _PAGES_ 页",     
							            "info": "没有数据",     
							            "oPaginate": {     
							                "sFirst": "首页",     
							                "sPrevious": "上一页",     
							                "sNext": "下一页",     
							                "sLast": "尾页"    
							          	},
							            "search":"",
							            "searchPlaceholder": "请输入关键字",
							            "infoFiltered":   "",
							            "infoEmpty":      "",
							         },  
						         "columnDefs": [{"defaultContent": "",
			                          "targets": "_all"}],
			                          "columns": [
						                     { "data": "user_name","className": "user_name-td" },
						                     { "data": "agent_grade","className": "agent_grade-td"},
						                     { "data": "balance" ,"className": "balance-td"},
						                     { "data": "recharge_money" ,"className": "recharge_money-td"},
						                     { "data": "code_money" ,"className": "code_money-td"},
						                     { "data": "rebate_money" ,"className": "rebate_money-td"},
						                 ],	 
						})
			function retrieveData(sSource, aoData, fnCallback) {
						$.ajax({
							url : sSource,//这个就是请求地址对应sAjaxSource
							data : {
								"pageCount":aoData[0].value,
								"startIndex":aoData[3].value,
								"lineCount":aoData[4].value,
								"startDate":StartDate,
								"endDate":EndDate
								/*"userName":$("#userName").val(),
								"agentName":$("#daili").val(),  */
							},//这个是把datatable的一些基本数据传给后台,比如起始位置,每页显示的行数
							type : 'post',
							dataType : 'json',
							async : false,
							 
							success : function(result) { 
								var newData=result.aaData;
								if(newData==""){
									 $("#div-user-message")[0].style.display="none"; 
								/* 	table-row-group */
									$(".toolbar")[0].style.display="none";
									$(".content_error")[0].style.display="flex";
									$(".text_error").text("代理佣金数据为空")
								}else if(newData.length<11){
									 $("#div-user-message")[0].style.display="table-row-group"
									 $(".toolbar")[0].style.display="none";
									 $(".content_error")[0].style.display="none"; 
									 $(".text_error").text("");
								 }else{
									 $("#div-user-message")[0].style.display="table-row-group"
									 $(".content_error")[0].style.display="none"; 
									 $(".text_error").text("");
									 $(".toolbar")[0].style.display="block";
								 } 
								 for(i=0;i<newData.length;i++){
									 item=newData[i];
									/* item.agent_grade=item.agent_grade+"级代理" */
								 }
								/*  $(".user_name").text(newData[0].user_name) */
								fnCallback(result);//把返回的数据传给这个方法就可以了,datatable会自动绑定数据的
							},
							error : function(msg) {
							}
						});
					}
				}
			 dataTable01()
			 
		
			
			
			$(".btn_search").on("click",function(){
				StartDate=$("#demo1").val();
				EndDate=$("#demo2").val();
				if(Number(StartDate.replace(/-/g,""))>Number(EndDate.replace(/-/g,""))){
					$("#tips")[0].style.display="block";
					$("#tips").text("开始时间不能大于结束时间");
				}else{
					$("#tips")[0].style.display="none";
					$("#tips").text("");
					 dataTable01()
				}
			})
			
			 $(".div-date-inner .div-date-select").on("click",function(){
				 $(this).siblings().children().removeClass("active")
				 $(this).children().addClass("active")
				 $("#dateXq").removeClass("active")
				 $(".div-dl-date span").text($(this).text())
				 if($(this).find("span").text()=="今天"){
					 StartDate=GetDateStr(0)
					 EndDate=GetDateStr(0)
				 }else if($(this).find("span").text()=="昨天"){
					 StartDate=GetDateStr(1)
					 EndDate=GetDateStr(1)
				 }else if($(this).find("span").text()=="一周"){
					 StartDate=GetDateStr(7)
					 EndDate=GetDateStr(0)
				 }else{
					 StartDate=GetDateStr(15)
					 EndDate=GetDateStr(0)
				 }
				 $("#demo1").val(StartDate);
				 $("#demo2").val(EndDate);
				 dataTable01()
			 })
			
			
			/* function getIcode(){
				ajax({
					url:"/u/yqm.do",
					success:function(data){
						var json=eval('('+data+')');
						$("#icode").val(json.message);
						$(this).remove()
					}
				});
			}		
			if ("${user.state}" === "2") {
				showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "试玩账号无法进行推广，请注册为正式账号")
			} else {
				getIcode();
			}
	       var clipboard = new ClipboardJS('#copy_btn');      
	       clipboard.on('success', function(e) {      
	           e.clearSelection();      
	       })
	       $("#copy_btn").on(getEndClickEvent(), function() {
	    	   showNormalNoticeModal("#div-i-noticeGenDan", "提示：", "复制成功！")
	       }) */
		</script>
	</body>
</html>